<template>
  <div v-loading="loading">
    <el-main class="common-container">
      <el-tag type="warning">
        <i class="el-icon-warning" />
        主题色会影响小程序部分按钮的颜色，因为系统允许页面配置独立的主题色，所以此配置的修改不会导致页面的主题色产生变化</el-tag>
      <div class="content-container">
        <div class="left-container">
          <ul class="content">
            <li
              v-for="(item, index) in themeColorOptions"
              :key="index"
              :style="{ backgroundColor: item.color, color: item.fontColor }"
              class="flexRCC"
            >
              我知道了
            </li>
          </ul>
        </div>

        <div class="right-container">
          <div v-loading="loading" class="content">
            <el-form
              ref="form"
              :model="form"
              :rules="rules"
              label-width="120px"
              size="small"
            >
              <el-form-item label="主题色：" prop="themeColor">
                <ul class="theme-color clearfix">
                  <li
                    v-for="(item, index) in themeColorOptions"
                    :key="index"
                    :style="{ backgroundColor: item.color }"
                    @click="setTheme(item)"
                  >
                    <svg-icon
                      v-if="form.themeColor == item.color"
                      icon-class="s-i-tick-plain"
                      class="right-svg"
                    />
                  </li>
                </ul>
              </el-form-item>
              <el-form-item>
                <el-button
                  size="small"
                  round
                  type="primary"
                  :disabled="loading"
                  @click="submit"
                >确 定</el-button>
                <el-button
                  size="small"
                  round
                  @click="fetchData"
                >重 置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import themeColor from '@/assets/json/theme-color.json'
import { getWxaConfig, editWxaConfig } from '@/views/wxaBuildModule/api/config'
export default {
  data() {
    return {
      // 校验字段
      rules: {
        themeColor: [
          {
            required: true,
            message: '请选择主题色',
            trigger: ['blur', 'change']
          }
        ]
      },
      // 配置
      themeColorOptions: themeColor,
      // 状态
      loading: false,
      // 数据
      classifyCode: 'DEFAULT',
      form: {
        themeColor: ''
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.fetchData()
  },
  methods: {
    /**
       * 数据组
       */
    // 获取数据
    fetchData() {
      const params = {
        classifyCode: this.classifyCode
      }
      this.loading = true
      getWxaConfig(params)
        .then((res) => {
          this.form = res.data
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false
        })
    },
    /**
       * 按钮组
       */
    // 选择主题色
    setTheme(item) {
      this.form.themeColor = item.color
      this.$refs.form.clearValidate()
    },

    // 保持主题色
    submit() {
      if (!this.form.id) return
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          const params = {
            classifyCode: this.classifyCode
          }
          const data = {
            id: this.form.id,
            themeColor: this.form.themeColor
          }
          editWxaConfig({ params, data })
            .then((res) => {
              this.$notify({
                title: '成功',
                message: '设置主题色成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
            })
            .catch((err) => {})
            .finally(() => {
              this.loading = false
            })
        }
      })
    }

    /**
       * 状态组
       */
    /**
       * 方法组
       */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 页面  */
  .common-container {
    margin-left: 20px;
    background-color: #fff;
    border-radius: 5px;
    .content-container {
      display: flex;
      margin-top: 20px;
    }
  }

  .left-container {
    .content {
      width: 375px;
      height: 667px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      li {
        flex: 1;
        margin: 5px 10px;
        border-radius: 25px;
      }
    }
  }

  .right-container {
    /* 主题色 */
    .theme-color {
      li {
        float: left;
        position: relative;
        width: 30px;
        height: 30px;
        margin: 5px 10px 5px 0;
        border-radius: 50%;
        .right-svg {
          position: absolute;
          top: -12px;
          left: 9px;
          font-size: 14px;
        }
      }
    }
  }
</style>
